<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七牛云CDN - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
</head>
<body class="sidebar-mini layout-fixed layout-navbar-fixed text-md <!--sidebar-collapse-->">
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <#include "/admin/inc/header.html">
        </nav>
        <aside class="main-sidebar sidebar-dark-primary ">
            <#include "/admin/inc/aside.html">
        </aside>
        <div class="content-wrapper bg-gray-custom">
            <div class="content-header pb-0">
                <div class="row mb-2">
                    <div class="col-12">
                        <h4 class="ml-2 mb-0 text-dark">
                            <img src="${una}/ub-admin/img/qiniu.png" class="img-fluid" style="height: 30px" alt="七牛云CDN">
                        </h4>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    <div class="row text-sm mt-4">
                        <div class="col-12">
                            <div class="alert alert-default-primary alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="fa fa-times-circle-o"></i></button>
                                <h6>
                                    <i class="fa fa-info-circle"> 提示!</i>
                                </h6>
                                <p class="text-sm text-secondary">使用七牛云存储将产生额外资费，若使用，请访问
                                    <a class="text-primary" href="https://www.qiniu.com/" target="_blank">https://www.qiniu.com/</a> 并开通相关服务，
                                    资费标准以七牛云为准，尤娜系统不收取任何存储费用!</p>
                            </div>
                            <form id="qiniu-form">
                                <div class="form-group row mb-4">
                                    <label class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">状态</label>
                                    <div class="col-lg-3 col-md-4 col-sm-5 pt-2">
                                        <div class="custom-control custom-radio custom-control-inline pr-4">
                                            <input type="radio" id="qiniu-cdn" name="enabled" value="1" <#if qiniu.enabled == true> checked</#if> class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="qiniu-cdn">开启</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="local-storage" name="enabled" value="0" <#if qiniu.enabled == false>checked</#if> class="custom-control-input">
                                            <label class="custom-control-label font-weight-normal" for="local-storage">关闭</label>
                                        </div>
                                        <p class="text-sm text-secondary mt-1">若七牛云存储状态处于关闭中，系统将使用服务器空间进行存储</p>
                                    </div>
                                </div>
                                <div id="showSwitch">
                                    <div class="form-group row mb-4">
                                        <label for="zone" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">存储区域</label>
                                        <div class="col-lg-3 col-md-4 col-sm-5">
                                            <select class="form-control form-control-sm" name="zone" id="zone" style="width: 100px">
                                                <#list zones as zone>
                                                    <#if qiniu.zone?? && qiniu.zone == zone.getCode()>
                                                        <option value="${zone.getCode()}" selected>${zone.getName()}</option>
                                                    <#else>
                                                        <option value="${zone.getCode()}">${zone.getName()}</option>
                                                    </#if>
                                                </#list>
                                            </select>
                                            <p class="text-sm text-secondary mt-1">请与七牛云平台设置的数据存储区域保持一致</p>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label for="accessKey" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">Access Key</label>
                                        <div class="col-lg-3 col-md-4 col-sm-5">
                                            <input class="form-control-sm form-control no-resize" name="accessKey" value="${qiniu.accessKey!''}" id="accessKey">
                                            <p class="text-sm text-secondary mt-1">请填写七牛云存储的AccessKey,详情请参看七牛云相关文档</p>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label for="secretKey" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">Access Key</label>
                                        <div class="col-lg-3 col-md-4 col-sm-5">
                                            <input class="form-control-sm form-control no-resize" name="secretKey" value="${qiniu.secretKey!''}" id="secretKey">
                                            <p class="text-sm text-secondary mt-1">请填写七牛云存储的SecretKey,详情请参看七牛云相关文档</p>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label for="bucket" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">Bucket</label>
                                        <div class="col-lg-3 col-md-4 col-sm-5">
                                            <input class="form-control-sm form-control no-resize" name="bucket" value="${qiniu.bucket!''}" id="bucket">
                                            <p class="text-sm text-secondary mt-1">请填写七牛云存储的Bucket,详情请参看七牛云相关文档</p>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-4">
                                        <label for="domain" class="col-lg-2 col-md-3 col-sm-4 col-form-label font-weight-normal text-center">URL</label>
                                        <div class="col-lg-3 col-md-4 col-sm-5">
                                            <input class="form-control-sm form-control" name="domain" value="${qiniu.domain!''}" id="domain">
                                            <p class="text-sm text-secondary mt-1">请填写在七牛云平台绑定的自定义域名</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-5 text-right">
                                        <button type="button" id="qiniu-btn" class="btn btn-primary">保存更改</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main-footer">
            <#include "/admin/inc/footer.html">
        </footer>
    </div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js"></script>
    <script src="${una}/ub-admin/js/jquery.validate.min.js"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script type="text/javascript">
        showSwitch();
        $("input[name='enabled']").on("click",function(){
           showSwitch();
        });
        function showSwitch(){
            var isShow = $("input:radio[name='enabled']:checked").val();
            if(isShow == 0){
                $("#showSwitch").find("input").each(function(){
                   $(this).attr("readonly","readonly");
                });
                $("select[name='zone']").attr("readonly","readonly");
            }else{
                $("#showSwitch").find("input").each(function(){
                    $(this).removeAttr("readonly");
                });
                $("select[name='zone']").removeAttr("readonly");
            }
        }
        var form = $("#qiniu-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.after(error);
            },
            rules:{
                zone:{
                    required:true
                },
                domain:{
                    required:true,
                    url:true
                },
                accessKey:{
                    required:true
                },
                secretKey:{
                    required:true
                },
                bucket:{
                    required:true
                }
            },
            messages:{
                zone:{
                    required:'请选择对应的存储中心'
                },
                domain: {
                    required:'请输入网站域名',
                    url:'域名格式不正确'
                },
                accessKey: {
                    required:'请输入七牛云AccessKey'
                },
                secretKey:{
                    required:'请输入七牛云SecretKey'
                },
                bucket:{
                    required:'请输入七牛云Bucket字符串'
                }
            }
        });
        $("#qiniu-btn").on("click",function(){
           var enabled = $("input:radio[name='enabled']:checked").val();
           if(enabled == 0){
               layer.confirm("你确定放弃使用七牛云存储服务吗？",{
                   title:"<i class='fa fa-info'></i> 提示！",
                   icon:1,
                   shade:[0.4,'#fff'],
                   shadeClose:false,
                   btn:['是（Y）','否（N）']
               },function(index){
                   submitForm(false);
                   layer.close(index);
               },function(index){
                   layer.close(index);
               });
           }else{
               submitForm(true);
           }
        });
        function submitForm(flag){
            var data = $("#qiniu-form").serialize();
            var isOk = true;
            if(flag){
                isOk = form.valid();
            }
            if(isOk){
                var load = layer.load(2,{
                    shade:[0.4,'#f0f0f0']
                });
                $.ajax({
                    type:'POST',
                    url:'${una}/admin/settings/qiniu',
                    data:data,
                    success:function(){
                        layer.close(load);
                        layer.alert("当前操作已成功执行!",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(index){
                                layer.close(index);
                                window.location.reload();
                            }
                        });
                    },
                    error:function(){
                        layer.close(load);
                        layer.alert("当前操作失败!请稍后再试。",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['Close'],
                            yes:function(newIndex){
                                layer.close(newIndex);
                            }
                        });
                    }
                });
            }else{
                return false;
            }
        }
    </script>
</body>
</html>